<template>
  <div class="collection-box page" ref="webview">
    <van-nav-bar title="我的收藏" class="bg_white" left-arrow @click-left="goBack" />
    <div class="collection-tab">
      <template v-for="(item,index) in collectionTab">
        <div class="tab" :key="index" :class="{active: collectionTabIndex === item.state}">
          <span class="name" ref="collectionTab" @click="collectionTabchange(index)">{{item.name}}</span>
        </div>
      </template>
      <span class="activeLine" v-if="collectionTabLeft" :style="'left:'+collectionTabLeft+'px'"></span>
    </div>
    <div class="content">
      <collection-goods v-if="collectionTabIndex===1"></collection-goods>
      <collection-store v-if="collectionTabIndex===2"></collection-store>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'collection',
  data () {
    return {
      collectionTabIndex: 1,
      collectionTabLeft: 0,
      collectionTab: [{
        state: 1,
        name: '商品'
      }, {
        state: 2,
        name: '店铺'
      }]
    };
  },
  mixins: [mixins],
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.collectionTabIndex = parseInt(this.$route.query.index) || 1;
      this.collectionTabLeft = this.$refs.collectionTab[this.collectionTabIndex - 1].offsetLeft;
    });
  },
  methods: {
    goBack () {
      this.$router.push({ 'path': '/my' });
    },
    collectionTabchange (index) {
      this.collectionTabIndex = index + 1;
      this.collectionTabLeft = this.$refs.collectionTab[index].offsetLeft;
      this.$router.push({ 'path': '/collection', query: { index: index + 1 } });
    }
  }
};
</script>
<style lang="less" scoped>
.collection-box {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
  }
  .collection-tab {
    display: flex;
    padding: 0 230px;
    line-height: 88px;
    position: relative;
    .tab {
      display: block;
      flex: 1;
      text-align: center;
      .name {
        font-size: 28px;
        color: #666;
      }
    }
    .tab.active {
      .name {
        color: #ff0034;
        font-weight: 800;
      }
    }
    .activeLine {
      position: absolute;
      display: block;
      bottom: 15px;
      height: 4px;
      width: 54px;
      border-radius: 4px;
      transition: left ease 0.3s;
      background-color: #ff0034;
    }
  }
}
</style>
